<template>
  <div class="unallocatedEquipment">
    <div class="header">
      <el-button type="primary" size="small" @click="add">添加设备</el-button>
      <el-button
        v-show="multipleSelection.length !== 0"
        size="small"
        @click="distribution"
        >批量分发</el-button
      >
    </div>
    <div class="content">
      <div class="search">
        <el-form
          :inline="true"
          :model="formInline"
          size="small"
          label-width="70px"
        >
          <el-form-item label="设备编号">
            <el-input
              v-model="formInline.code"
              placeholder="请输入设备编号"
              clearable
              @change="getData"
            ></el-input>
          </el-form-item>
          <el-form-item label="uuid">
            <el-input
              v-model="formInline.uuid"
              placeholder="请输入设备uid"
              clearable
              @change="getData"
            ></el-input>
          </el-form-item>
          <el-form-item label="设备名称">
            <el-select
              @change="changeSelect($event, 'name')"
              v-model="formInline.name"
              placeholder="请选择设备名称"
              filterable
              clearable
            >
              <el-option
                v-for="item in device"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.version
                }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select
              v-model="formInline.type"
              placeholder="请选择设备类型"
              @change="changeSelect($event, 'type')"
              filterable
              clearable
            >
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备型号">
            <el-select
              v-model="formInline.version"
              placeholder="请选择设备型号"
              @change="changeSelect($event, 'version')"
              filterable
              clearable
            >
              <el-option
                v-for="item in equipmentModel"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="search">确认搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        class="table"
        ref="table"
        :data="tableData"
        border
        row-key="id"
        :header-cell-style="{
          width: '100%',
          background: '#FAFAFA',
          color: '#606266',
          height: '60px'
        }"
        @selection-change="handleSelectionChange"
      >
        <!--height-422 平台管理和未分发设备一样  -->
        <el-table-column
          type="selection"
          align="center"
          reserve-selection
          width="50"
        ></el-table-column>
        <el-table-column
          label="序号"
          prop="no"
          width="100"
          align="center"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>
        <el-table-column
          label="设备信息"
          prop="name"
          min-width="400"
          align="center"
          :show-overflow-tooltip="tooltip"
        >
          <template slot-scope="scope">
            <div class="name content">
              <viewer>
                <img
                  alt
                  :src="
                    !scope.row.devicePicture ||
                    scope.row.devicePicture === '' ||
                    scope.row.devicePicture === null
                      ? errImg
                      : scope.row.devicePicture
                  "
                  :onerror="errImg"
                  title="查看高清图片"
                  class="img"
                />
              </viewer>
              <div>
                <div class="name">
                  <img src="../../assets/images/code.png" alt class="icon" />
                  <div class="label">设备编号:{{ scope.row.deviceNumber }}</div>
                </div>
                <div class="name">
                  <img src="../../assets/images/name.png" alt class="icon" />
                  <div class="label">设备名称:{{ scope.row.name }}</div>
                </div>
                <div class="name">
                  <img src="../../assets/images/type.png" alt class="icon" />
                  <div class="label">设备类型:{{ scope.row.type_name }}</div>
                </div>
                <div class="name">
                  <img src="../../assets/images/model.png" alt class="icon" />
                  <div class="label">设备型号:{{ scope.row.model_name }}</div>
                </div>
                <div class="name">
                  <img src="../../assets/images/branch.png" alt class="icon" />
                  <div class="label">
                    所属分支: {{ scope.row.projectName }}
                    {{
                      scope.row.groupName &&
                      scope.row.groupName !== "" &&
                      scope.row.groupName !== null
                        ? "/" + scope.row.groupName
                        : ""
                    }}
                    {{
                      scope.row.storeName &&
                      scope.row.storeName !== "" &&
                      scope.row.storeName !== null
                        ? "/" + scope.row.storeName
                        : ""
                    }}
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="录入人"
          prop="petName"
          align="center"
          :show-overflow-tooltip="tooltip"
          max-width="200"
        ></el-table-column>
        <el-table-column
          label="录入时间"
          prop="add_time"
          width="180"
          align="center"
          :show-overflow-tooltip="tooltip"
          sortable
        ></el-table-column>
        <el-table-column
          label="操作"
          prop="operation"
          width="350"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              size="small"
              @click="turn(scope.row)"
              >设备分发</el-button
            >
            <el-button
              type="success"
              plain
              size="small"
              @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="warning"
              plain
              size="small"
              @click="view(scope.row)"
              >查看</el-button
            >
            <el-button type="danger" plain size="small" @click="handlerdel"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-drawer
      @close="resetForm('ruleForm')"
      :title="type === 'add' ? '添加设备' : '编辑设备'"
      size="640px"
      custom-class="custom-drawer"
      :visible.sync="visible"
    >
      <el-form
        size="small"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="el-drawer-ruleForm"
      >
        <el-form-item label="设备编号" prop="code">
          <el-input
            v-model="ruleForm.code"
            clearable
            placeholder="请输入设备编号"
            :readonly="readonly"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备名称" prop="name">
          <el-input
            v-model="ruleForm.name"
            clearable
            placeholder="请输入设备名称"
            :readonly="readonly"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="公司名称:" prop="companyId">
          <el-select
            v-model="ruleForm.companyId"
            clearable
            placeholder="请选择公司名称"
            @change="handlercompanyId"
          >
            <el-option
              v-for="item in companySelList"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>-->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备容量" prop="capacity">
              <el-input
                v-model="ruleForm.capacity"
                clearable
                placeholder="请输入设备容量"
                :readonly="readonly"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备尺寸" prop="size">
              <el-input
                v-model="ruleForm.size"
                clearable
                placeholder="请输入设备尺寸"
                :readonly="readonly"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备类型" prop="type">
              <el-select
                class="formItem"
                :readonly="readonly"
                v-model="ruleForm.type"
                placeholder="请选择设备类型"
                filterable
                @change="handlerType"
                clearable
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备型号" prop="modelNumber">
              <el-select
                :readonly="readonly"
                class="formItem"
                v-model="ruleForm.modelNumber"
                placeholder="请选择设备型号"
                filterable
                clearable
              >
                <el-option
                  v-for="item in equipmentModel"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="温控器ID" prop="temperature">
          <el-input
            :readonly="readonly"
            class="formItem"
            v-model="ruleForm.temperature"
            placeholder="请输入温控器ID"
            clearable
          ></el-input>
        </el-form-item>
        <el-row :gutter="20">
          <el-form-item label="保修期" prop="warranty">
            <el-input
              :readonly="readonly"
              class="formItem"
              oninput="this.value=this.value.replace(/[^\d.]/g,'');"
              maxlength="10"
              v-model="ruleForm.warranty"
              placeholder="请输入保修期"
              clearable
            >
              <span slot="suffix">年</span>
            </el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="温控器型号" prop="model">
              <el-input
                :readonly="readonly"
                class="formItem"
                v-model="ruleForm.model"
                placeholder="请输入温控器型号"
                clearable
                :disabled="devicedisabled1"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="温控器版本" prop="version">
              <el-select
                class="formItem"
                :readonly="readonly"
                v-model="ruleForm.version"
                placeholder="请选择温控器版本"
                filterable
                clearable
                :disabled="devicedisabled1"
              >
                <el-option
                  v-for="item in versionList"
                  :key="item.id"
                  :label="item.versionNumber"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-form-item label="检测芯片ID" prop="chip">
          <el-input
            :readonly="readonly"
            v-model="ruleForm.chip"
            placeholder="请输入检测芯片ID"
            clearable
          ></el-input>
        </el-form-item> -->
        <el-form-item label="制造厂商" prop="manufacturer">
          <el-input
            :readonly="readonly"
            v-model="ruleForm.manufacturer"
            placeholder="请输入制造厂商"
            clearable
          ></el-input>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="生产日期" prop="production">
              <el-date-picker
                :readonly="readonly"
                class="formItem"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                v-model="ruleForm.production"
                placeholder="请选择生产日期"
                type="date"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出厂日期" prop="manufacture">
              <el-date-picker
                :readonly="readonly"
                class="formItem"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                v-model="ruleForm.manufacture"
                placeholder="请选择出厂日期"
                type="date"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="入库日期" prop="warehouse">
              <el-date-picker
                :readonly="readonly"
                class="formItem"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                v-model="ruleForm.warehouse"
                placeholder="请选择入库日期"
                type="date"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安装日期" prop="install">
              <el-date-picker
                :readonly="readonly"
                class="formItem"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                v-model="ruleForm.install"
                placeholder="请选择安装日期"
                type="date"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="el-drawer__footer">
        <el-button
          :disabled="readonly"
          type="primary"
          @click.prevent="submitForm('ruleForm')"
          :loading="confirmLoading"
          >{{ confirmLoading ? "保 存 中..." : "保 存" }}</el-button
        >
        <el-button :disabled="readonly" @click="resetForm('ruleForm')"
          >取 消</el-button
        >
      </div>
    </el-drawer>
    <el-dialog
      title="设备分发"
      :visible.sync="dialog"
      @close="clearForm('dialogForm')"
      width="480px"
    >
      <el-form
        class="el-form-dialog"
        :model="dialogForm"
        :rules="dialogRules"
        ref="dialogForm"
        label-width="80px"
      >
        <el-form-item label="调转项目" prop="project_id">
          <el-select
            class="formItem"
            @change="onChange($event, 'project_id')"
            v-model="dialogForm.project_id"
            placeholder="请选择调转项目"
            filterable
            clearable
          >
            <el-option
              v-for="item in project"
              :key="item.id"
              :label="item.projectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="调转组"
          v-show="
            dialogForm.project_id &&
              dialogForm.project_id !== '' &&
              dialogForm.project_id !== null
          "
          prop="group_id"
        >
          <el-select
            class="formItem"
            @change="onChange($event, 'group_id')"
            v-model="dialogForm.group_id"
            placeholder="请选择调转组"
            filterable
            clearable
          >
            <el-option
              v-for="item in groupList"
              :key="item.id"
              :label="item.groupName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="调转门店"
          v-show="
            dialogForm.group_id &&
              dialogForm.group_id !== '' &&
              dialogForm.group_id !== null
          "
          prop="store_id"
        >
          <el-select
            class="formItem"
            v-model="dialogForm.store_id"
            placeholder="请选择调转门店"
            filterable
            clearable
          >
            <el-option
              v-for="item in storeList"
              :key="item.id"
              :label="item.storeName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :disabled="readonly" @click="clearForm('dialogForm')"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click.prevent="saveForm('dialogForm')"
          :loading="confirmLoading"
          >{{ confirmLoading ? "保 存 中..." : "保 存" }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getProject,
  getDeviceList,
  devicTypeList,
  devicModelList,
  deviceMonitorList,
  deviceList,
  getVersionList,
  deviceDetails,
  deviceAdd,
  deviceEdit,
  deviceTransfer,
  getWhereGroup,
  getWhereStore,
  deviceDistribution,
  companySel,
  deleteDevice
} from "../../utils/api";
import { mapState, mapGetters } from "vuex";
//未分发设备
export default {
  name: "UnallocatedEquipment",
  props: ["height"],
  data() {
    return {
      readonly: false, //禁用表单
      errImg: 'this.src="' + require("../../assets/images/chest.png") + '"',
      formInline: {
        code: "", //设备编号
        name: "", //设备名称
        version: "", //设备型号
        type: "", //设备类型
        uuid: ""
      },
      project: [], //项目列表
      typeList: [], //设备类型列表
      equipmentModel: [], //设备型号列表
      device: [], //设备列表
      versionList: [], //温控器版本列表
      monitorList: [], //设备监控项列表
      groupList: [], //调转组列表
      storeList: [], //调转门店列表
      tableData: [], //表格数据
      pageSizes: [10, 20, 30, 40, 50], //每页选择条数
      total: 0, //总条数
      currentPage: 1, //当前页
      pageSize: 10, //每页条数
      tooltip: true,
      visible: false,
      confirmLoading: false, //按钮加载
      type: "add",
      ruleForm: {
        name: "", //设备名称
        code: "", //设备编号
        type: "", //设备类型
        capacity: "", //容量
        size: "", //大小
        modelNumber: "", //设备型号,
        warranty: "", //保修期
        temperature: "", //温控器ID
        version: "", //温控器版本
        monitor: [], //设备监控项
        model: "", //温控器型号
        // chip: "", //检测芯片ID
        manufacturer: "", //制造厂商
        production: "", //生产日期
        warehouse: "", //入库日期
        manufacture: "", //出厂日期
        install: "", //安装日期
        companyId: "" //公司id
      },
      rules: {
        name: [
          { required: true, message: "请输入设备名称", trigger: "change" }
        ],
        companyId: [
          { required: true, message: "请选择公司", trigger: "change" }
        ],
        capacity: [
          { required: true, message: "请输入设备容量", trigger: "change" }
        ],
        size: [
          { required: true, message: "请输入设备大小", trigger: "change" }
        ],
        code: [
          { required: true, message: "请输入设备编号", trigger: "change" }
        ],
        type: [
          { required: true, message: "请选择设备类型", trigger: "change" }
        ],
        modelNumber: [
          { required: true, message: "请选择设备型号", trigger: "change" }
        ],
        warranty: [
          { required: true, message: "请输入保修期", trigger: "change" }
        ],
        temperature: [
          { required: true, message: "请输入温控器ID", trigger: "change" }
        ],
        model: [
          { required: true, message: "请输入温控器型号", trigger: "change" }
        ],
        // version: [
        //   { required: true, message: "请选择温控器版本", trigger: "change" }
        // ],
        monitor: [
          { required: true, message: "请选择设备监控项", trigger: "change" }
        ],

        manufacturer: [
          { required: true, message: "请输入厂商", trigger: "blur" }
        ],
        production: [
          { required: true, message: "请输入生产日期", trigger: "blur" }
        ],
        manufacture: [
          { required: true, message: "请输入出场日期", trigger: "blur" }
        ],
        warehouse: [
          { required: true, message: "请输入入库日期", trigger: "blur" }
        ],
        install: [{ required: true, message: "请输入安装期", trigger: "blur" }]
        // chip: [
        //   { required: true, message: "请输入检测芯片ID", trigger: "change" }
        // ]
      },
      pickerOptions: {
        disabledDate: time => time.getTime() > new Date() * 1 + 600 * 1000
      }, //配置日期选择器,禁用今日之后的日期
      user_id: "", //用户信息id
      currentRow: {}, //当前行信息
      multipleSelection: [], //表格多选数据
      //设备分发
      dialog: false,
      dialogForm: {
        project_id: "", //调转项目
        group_id: "", //调转组
        store_id: "" //调转门店
      },
      dialogRules: {
        project_id: [
          { required: true, message: "请选择调转项目", trigger: "change" }
        ],
        group_id: [
          { required: true, message: "请选择调转组", trigger: "change" }
        ],
        store_id: [
          { required: true, message: "请选择调转门店", trigger: "change" }
        ]
      },
      device_id: "", //设备id

      // 公司的列表
      companySelList: [],
      devicedisabled1: false,
      devicearrId: []
    };
  },
  async created() {
    this.user_id = JSON.parse(sessionStorage.getItem("userId"));
    // await this.getSelect();
    // await this.getData();
    // await this.getcompanySel();
    this.getDataInit();
  },
  methods: {
    getDataInit() {
      if (this.org_id === "" || this.org_id === null || !this.org_id) {
      } else {
        this.getSelect();
        this.getData();
      }
    },
    handlerType(val) {
      this.postRequest(devicModelList, { companyId: this.org_id }).then(res => {
        let newarr = [];
        res.data.map(v => {
          if (val == v.deviceTypeId) {
            newarr.push(v);
          }
        });
        this.equipmentModel = newarr;
      });
    },
    //搜索
    search() {
      this.currentPage = 1;
      this.getData();
    },
    //下拉框改变事件
    changeSelect(value, key) {
      this.formInline[key] = value;
      this.currentPage = 1;
      this.getData();
    },
    //表格多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      val.map(item => {
        this.devicearrId.push(item.id);
      });
      this.devicearrId = Array.from(new Set(this.devicearrId));
      this.device_id = val.map(v => v.id).join(",");
    },
    handlerdel() {
      if (this.devicearrId.length == 0) {
        this.$message.error("请选择删除的设备");
      } else {
        this.devicearrId = JSON.stringify(this.devicearrId);
        // console.log(this.devicearrId);

        this.$confirm("你确定删除所选的设备吗啊?, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.postRequest(deleteDevice, { devIdArr: this.devicearrId }).then(
              res => {
                if (res.code == 200) {
                  this.$message({
                    type: "success",
                    message: "删除设备成功!"
                  });
                  this.getData();
                }
              }
            );
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除设备"
            });
          });
      }
    },
    //获取搜索下拉列表事件
    async getSelect() {
      this.project = await this.postRequest(getProject, {
        companyId: this.org_id
      }).then(res => res.data); //项目列表
      this.device = await this.postRequest(getDeviceList, {
        companyId: this.org_id
      }).then(res => res.data); //设备列表
      this.typeList = await this.postRequest(devicTypeList, {
        companyId: this.org_id
      }).then(res => res.data); //设备类型列表
      this.equipmentModel = await this.postRequest(devicModelList, {
        companyId: this.org_id
      }).then(res => res.data); //设备型号
    },
    getData() {
      const { code, name, version, type, uuid } = this.formInline;
      const params = {
        type: 2, //1-平台设备管理列表,2-未分发设备列表
        projectId: "",
        pageSize: this.pageSize,
        pageNumber: this.currentPage,
        deviceNumber: code, //设备编号
        nameId: name, //设备名称
        typeId: type, //设备类型
        modelId: version, //设备型号
        storeId: "", //所属分支
        companyId: this.org_id,
        uuid: uuid
      };
      this.postRequest(deviceList, params).then(res => {
        if (res.code === 200) {
          this.total = res.data.count;
          this.tableData = res.data.data;
        }
      });
    },
    //分页
    handleSizeChange(val) {
      //每页条数
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      //当前第几页
      this.currentPage = val;
      this.getData();
    },
    //设备分发
    turn(row) {
      this.currentRow = row;
      this.device_id = row.id;
      this.dialog = true;
    },
    //设备批量分发
    distribution() {
      this.dialog = true;
    },
    //查看详情
    detail(row) {
      this.currentRow = row;
    },
    //添加设备
    add() {
      this.visible = true;
      this.readonly = false;
      this.devicedisabled1 = false;
      this.type = "add";
      this.getMonitorList();
    },
    //编辑设备
    async edit(row) {
      this.currentRow = row;
      this.type = "edit";
      this.readonly = false;
      this.visible = true;
      this.devicedisabled1 = true;
      await this.getMonitorList();
      await this.getDetail(row.id);
    },
    //查看
    async view(row) {
      this.currentRow = row;
      this.visible = true;
      this.readonly = true;
      this.devicedisabled1 = true;
      await this.getMonitorList();
      await this.getDetail(row.id);
    },
    getDetail(id) {
      this.postRequest(deviceDetails, { id }).then(res => {
        const form = res.data;
        this.ruleForm = {
          name: form.name, //设备名称
          code: form.deviceNumber, //设备编号
          type: form.typeId, //设备类型
          capacity: form.capacity,
          size: form.size,
          modelNumber: form.modelId, //设备型号,
          warranty: 1, //保修期
          temperature: form.uuid, //温控器ID
          version: form.version, //温控器版本
          monitor: form.device_monitor.map(v => v.id), //设备监控项
          model: form.TmodelId, //温控器型号
          // chip: form.detectionChip, //检测芯片ID
          manufacturer: form.cooperName, //制造厂商
          production: form.create_time, //生产日期
          warehouse: form.store_time, //入库日期
          manufacture: form.out_time, //出厂日期
          install: form.install_time //安装日期
        };
      });
    },
    //获取设备监控项类型和温控器版本号
    async getMonitorList() {
      this.versionList = await this.postRequest(getVersionList, {
        companyId: this.org_id
      }).then(res => res.data); //温控器版本号
      this.monitorList = await this.postRequest(deviceMonitorList, {
        companyId: this.org_id
      }).then(res => res.data); //设备监控项
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const params = {
            user_id: this.user_id,
            companyId: this.org_id, //公司id
            name: this.ruleForm.name, //设备名称
            deviceNumber: this.ruleForm.code, //设备编号
            // detectionChip: this.ruleForm.chip, //检测芯片ID
            deviceMonitorId: this.ruleForm.monitor.join(","), //设备监控项
            typeId: this.ruleForm.type, //设备类型
            uuid: this.ruleForm.temperature, //温控器ID
            modelId: this.ruleForm.modelNumber, //设备型号
            TmodelId: this.ruleForm.model, //温控器型号
            version: this.ruleForm.version, //温控器版本号
            deviceGuarantee: this.ruleForm.warranty, //保修期
            capacity: this.ruleForm.capacity,
            size: this.ruleForm.size,
            cooperName:
              !this.ruleForm.manufacturer || this.ruleForm.manufacturer === null
                ? ""
                : this.ruleForm.manufacturer, //制造厂商
            create_time:
              !this.ruleForm.production || this.ruleForm.production === null
                ? ""
                : this.ruleForm.production, //生产日期
            install_time:
              !this.ruleForm.install || this.ruleForm.install === null
                ? ""
                : this.ruleForm.install, //安装日期
            store_time:
              !this.ruleForm.warehouse || this.ruleForm.warehouse === null
                ? ""
                : this.ruleForm.warehouse, //入库日期
            out_time:
              !this.ruleForm.manufacture || this.ruleForm.manufacture === null
                ? ""
                : this.ruleForm.manufacture //出厂日期
          };
          const url = this.type === "add" ? deviceAdd : deviceEdit;
          if (this.type === "edit") params.id = this.currentRow.id;
          this.confirmLoading = true;
          this.postRequest(url, params)
            .then(res => {
              this.confirmLoading = false;
              if (res.code === 200) {
                this.resetForm(formName);
                this.getData();
                this.getSelect();
              }
            })
            .catch(err => {
              this.confirmLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm = {
        name: "", //设备名称
        code: "", //设备编号
        type: "", //设备类型
        modelNumber: "", //设备型号,
        warranty: "", //保修期
        temperature: "", //温控器ID
        version: "", //温控器版本
        monitor: [], //设备监控项
        model: "", //温控器型号
        // chip: "", //检测芯片ID
        manufacturer: "", //制造厂商
        production: "", //生产日期
        warehouse: "", //入库日期
        manufacture: "", //出厂日期
        install: "" //安装日期
      };
      this.visible = false;
    },
    saveForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const params = {
            user_id: this.user_id,
            device_id: this.device_id, //设备id
            project_id: this.dialogForm.project_id, //项目id
            group_id: this.dialogForm.group_id, //组id
            store_id: this.dialogForm.store_id //门店id
          };
          this.confirmLoading = true;
          this.postRequest(deviceDistribution, params)
            .then(res => {
              this.confirmLoading = false;
              if (res.code === 200) {
                this.clearForm(formName);
                this.getData();
                this.getSelect();
              }
            })
            .catch(err => {
              this.confirmLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    clearForm(formName) {
      this.$refs[formName].resetFields();
      this.dialog = false;
      this.dialogForm = {
        project_id: "", //调转项目
        group_id: "", //调转组
        store_id: "" //调转门店
      };
    },
    //下拉框改变事件
    onChange(value, key) {
      this.dialogForm[key] = value;
      const url = key === "project_id" ? getWhereGroup : getWhereStore;
      const params = {
        [key === "project_id" ? "projectId" : "groupId"]: value
      };
      this.postRequest(url, params).then(res => {
        if (key === "project_id") {
          this.groupList = res.data; //调转组列表
        } else {
          this.storeList = res.data; //调转门店列表
        }
      });
    }
    //  获取公司的无分页列表
    // getcompanySel() {
    //   this.postRequest(companySel).then(res => {
    //     if (res.code == 200) {
    //       this.companySelList = res.data;
    //     }
    //   });
    // },
    //  拿到公司的id
    // handlercompanyId(val) {
    //   this.ruleForm.companyId = val;
    // }
  },
  computed: {
    ...mapState(["org_id"])
  },
  watch: {
    org_id(val) {
      this.currentPage = 1;
      this.getSelect();
      this.getData();
    }
  }
};
</script>

<style scoped>
.unallocatedEquipment >>> .el-dialog__body {
  padding: 20px 20px 0;
}

.header {
  padding: 20px 30px;
  border: 1px solid #eaedf3;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 97%;
  margin: 0 auto;
}

.formItem {
  width: 100%;
}

.content {
  padding: 30px;
  box-sizing: border-box;
}

.search {
  border: 1px solid #eaedf3;
  padding: 20px 25px 2px 25px;
  box-sizing: border-box;
  border-radius: 4px;
}

.table {
  margin-top: 30px;
}

.img {
  width: 80px;
  height: 120px;
  display: block;
  margin-right: 20px;
}

/*设备名称*/
.content {
  padding-right: 20px;
  overflow: hidden;
  width: 100%;
}

.name {
  display: flex;
  align-items: center;
}

.icon {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

.label {
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #606266;
  margin-bottom: 10px;
}

.label:last-of-type {
  margin-bottom: 0;
}
</style>
